<template>
  <div class="app-container">
    <div class="filter-container">  <!-- 增加 删除 按钮  -->
      <el-form>
        <el-form-item align="center">
          <el-date-picker
            v-model="day"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            @change="dayChange()">
          </el-date-picker>
          
          
          <!-- 问题:根据输入的内容 搜索 匹配 显示相关的内容  还有就是搜索框根据浏览器的视图大小而变化 还需要稍微修改  dev-->  
          
          <el-input v-model="search" placeholder="请输入搜索设备内容" style='width: 50%;' ></el-input>
          <el-button type="primary" icon="el-icon-search" circle style='margin-left:10px;' @click="searchDevice()"></el-button>
        </el-form-item>
      </el-form>
    </div>

<!-- 这是一个 表格 -->   
    <el-table
      :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row
      style="width: 100%;">    
    <el-table-column align="center" prop="devId" label="设备编号">
      </el-table-column>
      <el-table-column align="center" prop="devModel" label="设备型号">
      </el-table-column>
      <el-table-column align="center" prop="devName" label="设备名称">
      </el-table-column>
      <el-table-column align="center" prop="devBrand" label="设备品牌">
      </el-table-column>
      <el-table-column align="center" prop="devType" label="类型/属性">
      </el-table-column>
      <el-table-column align="center" prop="devPosition" label="使用位置">
      </el-table-column>
      

      <el-table-column align="center" label="操作">
      <template slot-scope="scope">
        <el-button type="primary" size="small"  @click="showDialog(scope.row)">查看详情</el-button>
        <router-link to="/reservation/dev_apply">
            <el-button type="success" size="small"  @click="apply(scope.row)">申请设备</el-button>
        </router-link>
      </template>
    </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination style="padding-top:10px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="listQuery.pageNum"
      :page-size="listQuery.pageRow"
      :total="totalCount"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>



    <el-dialog title="设备详情" :visible.sync="dialogFormVisible">
       <el-row>
         <el-col :span="12">
           <div id="myChart1" style="width:100%;height:400px;"></div>
         </el-col>

         <el-col :span="12">
           <div id="myChart2" style="width:100%;height:400px;"></div>
         </el-col>

       </el-row>
       <el-row>
         <div id="myChart3" style="width:100%;height:300px;"></div>
       </el-row>
      
    </el-dialog>

    
  </div>
</template>
<script>
import {mapGetters} from 'vuex'
import global from '../../Global'


  export default {
    data() {
      return {
        orgOptions1:{
          toolbox: {
              show : true,
              feature : {
                  dataView : {show: true, readOnly: false},
                  saveAsImage : {show: true}
              }
          },
          title:{
            text:'项目功能使用次数', 
            x: 'center',
            y: 0
          },
          
          angleAxis: {
              type: 'category',
              //data: ['功能一', '功能二', '功能三', '功能四', '功能五', '功能六', '功能七'],
              data: ['观测', '辅助', '器材', '测量', '统计', '观察', '加快'],
              z: 10
          },
          radiusAxis: {
          },
          polar: {
          },
          series: [{
            itemStyle:{
                    normal:{
                        color:'#d8cc85'
                        
                    }
                },
              type: 'bar',
              data: [Math.round(Math.random()*100), Math.round(Math.random()*100), Math.round(Math.random()*100), Math.round(Math.random()*100), Math.round(Math.random()*100), Math.round(Math.random()*100), Math.round(Math.random()*100)],
              coordinateSystem: 'polar',
              name: 'A',
              stack: 'a'
          }]
        },
        orgOptions2:{
          toolbox: {
              show : true,
              feature : {
                  dataView : {show: true, readOnly: false},
                  saveAsImage : {show: true}
              }
          },
          title : {
              text: '设备使用次数',
              x:'center'
          },
          tooltip : {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
              orient: 'vertical',
              left: 'left',
              data: ['使用次数','停用次数','维修次数']
          },
          series : [
              {
                  name: '访问来源',
                  type: 'pie',
                  radius : '55%',
                  center: ['50%', '60%'],
                  data:[
                      {value:Math.round(Math.random()*100+10), name:'使用次数'},
                      {value:Math.round(Math.random()*10), name:'停用次数'},
                      {value:Math.round(Math.random()+1), name:'维修次数'}
                  ],
                  itemStyle: {
                      emphasis: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              }
          ]
        },
        orgOptions3:{
          
            toolbox: {
                show : true,
                feature : {
                    dataView : {show: true, readOnly: false},
                    saveAsImage : {show: true}
                }
            },
            title:{
            text:'近5日使用人数'  
            },
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : [(new Date((new Date()).getTime()-3600*24*1*1000)).toLocaleDateString(),
                    (new Date((new Date()).getTime()-3600*24*2*1000)).toLocaleDateString(),
                     (new Date((new Date()).getTime()-3600*24*3*1000)).toLocaleDateString(), 
                     (new Date((new Date()).getTime()-3600*24*4*1000)).toLocaleDateString(),
                      (new Date((new Date()).getTime()-3600*24*5*1000)).toLocaleDateString()],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [
                {
                    max:'10'
                }
            ],
            series : [
                {
                  itemStyle:{
                    normal:{
                        color:'#61a0a8'
                    }
                },
                    name:'次数',
                    type:'bar',
                    barWidth: '60%',
                    data:[ Math.round(Math.random()*10), Math.round(Math.random()*10), Math.round(Math.random()*10), Math.round(Math.random()*10),Math.round(Math.random()*10)]
                }
            ]
        },
        day: new Date(),
        search: '',
        listDev: '',
        listDev:{
          value: '',
          label: '',
        },
        totalCount: 0,
        list: [],//表格的数据
        listLoading: false,//数据加载等待动画
        dialogStatus: 'create',
        dialogFormVisible: false,
        listQuery: {
          pageNum: 1, //页码
          pageRow: 50, //每页条数
          date:'',
        },
        SituationType:[{
          value: '空闲中',
          label: '空闲中'
        },{
          value: '使用中',
          label: '使用中'
        },{
          value: '维护中',
          label: '维护中'
        },{
          value: '停用中',
          label: '停用中'
        }],
        textMap: {
          create: '新建设备'
        },
        tempDevice: {
          devId: '',
          devModel: '',
          devName: '',
          devBrand: '',
          devType: '',
          devPosition: '',
          devSituation: '',
          devAdminId: '',
          permissions: [],
        },
      }
    },
    created() {
      this.getList();
    },
    methods: {
      apply(row){
        global.obj.devId = row.devId;
        global.obj.devPosition = row.devPosition;
        global.obj.devName = row.devName;
      },
      getList() {
        //查询列表
        this.listLoading = true;
        this.listQuery.date = this.day.toLocaleDateString()

        this.api({
          url: "/devices/listDevices",
          method: "get",
          params: this.listQuery
        }).then(data => {
          this.listLoading = false;
          this.list = data.list;
          console.log(data);
          this.totalCount = data.totalCount;
        })
      },
      dayChange(){
        this.getList();
      },
      searchDevice(){
        this.listLoading = true;

        this.api({
          url: "/devices/searchDevice",
          method: "post",
          data:{
            key:this.search
          }
        }).then(data => {
          console.log(data);
          this.listLoading = false;
          this.list = data.list;
          this.totalCount = data.totalCount;
        })

      },


      handleSizeChange(val) {
        //改变每页数量
        this.listQuery.pageRow = val
        this.handleFilter();
      },
      handleCurrentChange(val) {
        //改变页码
        this.listQuery.pageNum = val
        this.getList();
      },
      handleFilter() {
        //查询事件
        this.listQuery.pageNum = 1
        this.getList()
      },
      getIndex($index) {
        //表格序号
        return (this.listQuery.pageNum - 1) * this.listQuery.pageRow + $index + 1
      },
      showDialog(row){
        this.dialogFormVisible = true;
        this.$nextTick(function(){ 
          var myChart1 = this.$echarts.init(document.getElementById('myChart1'));
          myChart1.setOption(this.orgOptions1);
          var myChart2 = this.$echarts.init(document.getElementById('myChart2'));
          myChart2.setOption(this.orgOptions2);
          var myChart3 = this.$echarts.init(document.getElementById('myChart3'));
          myChart3.setOption(this.orgOptions3);
         });
        
        
      
        
      }
    }
  }
</script>
<style scoped>
  .requiredPerm {
    color: #ff0e13;
  }
</style>
